<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<!--父组件模板-->
<div id="app">
 <cpn :number1="num1"
      :number2="num2"
      @num1change="num1change" @num2change="num2change"></cpn>
</div>

<template id="cpn">
  <div>
    <h1>{{number1}}</h1>
    <!--<input type="text" v-model="dnumber1">-->
    <input type="text" :value="dnumber1" @input="num1Input">
    <h1>{{number2}}</h1>
    <!--<input type="text" v-model="dnumber2">-->
    <input type="text" :value="dnumber2" @input="num2Input">
  </div>
</template>


<script src="../js/vue%20.js"></script>
<script>

  //父组件
  const app = new Vue({
    el:'#app',
    data:{
      num1: 1,
      num2: 0,
    },
    components: {
      cpn: {
        template: '#cpn',
        props: {
          number1: Number,
          number2: Number
        },
        data() {
          return {
            dnumber1: this.number1,
            dnumber2: this.number2
          }
        },
        methods: {
          num1Input(event) {
            //1.将input中的value赋值到dnumber中
            this.dnumber1 = even.target.value;

            //2.为了让父组件可以修改值,发出一个事件
            this.$emit('num1change'.this.dnumber1)

            //3.同时改变dnumber2的值
            this.dnumber2 = this.dnumber1 * 100;
            this.$emit('number2change',this.dnumber2)
          },
          num2Input(event) {
            this.dnumber2 = even.target.value;
            this.$emit('num2change'.this.dnumber2)
            //3.同时改变dnumber1的值
            this.dnumber1 = this.dnumber2 / 100;
            this.$emit('number1change',this.dnumber1)
          },
          num1change(value){
            this.num1 = parseFloat(value)
          },
          num2change(value){
              this.num2 = value * 1
          }
        }
      }
    }
  })
</script>
</body>
</html>